<!--
 * @Author: your name
 * @Date: 2021-04-09 19:43:33
 * @LastEditTime: 2021-04-12 14:56:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\dianshang\src\views\GroupStatus\index.vue
-->
<template>
  <div class="groupStatus">
    <div class="goToTop">
      <span @click="handlePushBargain">&lt;</span>
      <h2>规则</h2>
    </div>
    <div class="shopTitle">
      <img :src="shopItem.groupImgUrl" alt />
    </div>
    <div class="container">
      <div class="shopNumber">
        <div class="residueTime" style="margin: 10px 0;">
          <!-- 剩余时间 -->
          <span style="display: flex; font-size: 12px; align-items: center;">
            <van-count-down :time="time" style="font-size: 12px; margin: 0 5px;" />后过期
          </span>
        </div>
        <div class="bargainPrice">
          <!-- 砍刀多少数量 -->
          已有
          <b style="color: #d42f3b;" v-text="groupRecords.length"></b>
          人参团，仅差
          <b
            style="color: #d42f3b;"
            v-text="shopItem.groupNumber-groupRecords.length>0?shopItem.groupNumber-groupRecords.length:0"
          ></b>人
        </div>
        <div class="residuePercentage">
          <!-- 剩余百分比 -->
          <b
            style="font-size: 36px; color: red;"
          >{{shopItem.groupNumber-groupRecords.length>0?shopItem.groupNumber-groupRecords.length:0}}</b>
        </div>
        <div
          style="width: 100%; height: 35px; display: flex; align-items: center; padding: 0 20px; margin-bottom: 10px;"
        >
          <!-- 进度条 -->
          <span style="width: 100%; height: 15px; background: #ffe5b9; border-radius: 10px;"></span>
        </div>
        <div style="width: 100%; height: 40px; padding: 0 20px;">
          <!-- 按钮邀请好友 -->
          <button
            style="
            width: 100%; 
            height: 100%; 
            border-radius: 20px;  
            background: -webkit-linear-gradient(#fd643a, #fcb34a);
            border: none;
            outline: none;
            color: #fff;
            "
            @click="()=>dirlogTwoIsShow=true"
          >邀请好友拼团</button>
        </div>
      </div>
      <div class="record">
        <header>
          <span>砍价记录</span>
        </header>
        <main>
          <dl v-for="(item,index) in groupRecords" :key="index">
            <dt>
              <img
                :src="item.userImgUrl"
                alt
                style="width: 50px; height: 50px; border-radius: 50%;"
              />
              <div>
                <span>{{item.username}}</span>
                <span>金刀砍一砍</span>
              </div>
            </dt>
            <dd>
              <span style="color: #cc3300; margin: 0 5px; font-weight: 600;">已拼团</span>
              <span
                v-text="shopItem.groupNumber-(index+1)>0?`(还差${shopItem.groupNumber-(index+1)}人)`:'(完成)'"
              ></span>
            </dd>
          </dl>
        </main>
      </div>
    </div>
    <DirlogTwo
      :isShow="dirlogTwoIsShow"
      :avatar="userInfo?userInfo.avatar:'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3717120934,3932520698&fm=26&gp=0.jpg'"
      :num="shopItem.groupNumber-groupRecords.length"
      @handleCloseDirlog="handleCloseDirlog"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import DirlogTwo from "./components/DirlogTwo";
export default {
  components: {
    DirlogTwo,
  },
  data() {
    return {
      time: 24 * 60 * 60 * 1000, //倒计时数据
      dirlogTwoIsShow: false, //弹框开关
      shopItem: {}, //商品详情
      groupRecords: [], //拼团记录
    };
  },
  computed: {
    ...mapState("login", ["userInfo"]),
  },
  methods: {
    //返回砍价首页
    handlePushBargain() {
      this.$router.push("/group");
    },
    //关闭弹窗
    handleCloseDirlog() {
      this.dirlogTwoIsShow = false;
    },
    //获取商品
    async handleGetHttpShopItem() {
      const shopId = this.$route.query.id;
      const data = await this.$api.groupItem(shopId);
      if (data.code === 0) {
        this.shopItem = data.data.data[0];
      }
    },
    //获取拼团历史记录
    async fandGroupRecordsList() {
      const shopId = this.$route.query.id;
      const data = await this.$api.fandGroupRecordsList(shopId);
      if (data.code === 0) {
        this.groupRecords = data.data.data;
      }
    },
  },
  created() {
    this.handleGetHttpShopItem(); //获取商品
    this.fandGroupRecordsList(); //获取拼团历史记录
  },
};
</script>

<style lang="scss" scoped>
.groupStatus {
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(#fd643a, #fcb34a);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .goToTop {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    span {
      color: #333;
    }
    h2 {
      font-size: 14px;
      color: #f0d69e;
      position: fixed;
      right: 20px;
      top: 40px;
    }
  }
  .shopTitle {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: -webkit-linear-gradient(#fd643a, #fcb34a);
    img {
      width: 170px;
      height: 170px;
      border-radius: 20px;
    }
  }
  .container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: -webkit-linear-gradient(#ffdca4, #ffeacb);
    padding: 0 10px;
    box-sizing: border-box;
    .shopNumber {
      width: 100%;
      height: 200px;
      background: #fefaee;
      margin: 10px 0;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #573d21;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .record {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #fefaee;
      border-radius: 10px;
      header {
        width: 100%;
        height: 46px;
        background: #fed89a;
        display: flex;
        align-items: center;
        padding: 0 10px;
        span {
          font-size: 14px;
          color: #d14d34;
          font-weight: 600;
        }
      }
      main {
        flex: 1;
        overflow-y: scroll;
        dl {
          width: 100%;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          dt {
            display: flex;
            align-items: center;
            img {
              margin: 0 10px;
            }
            div {
              display: flex;
              flex-direction: column;
              justify-content: center;
              span {
                font-size: 12px;
                margin: 3px 0;
                color: #8c763b;
              }
            }
          }
          dd {
            span {
              font-size: 12px;
              color: #8c763b;
            }
          }
        }
      }
    }
  }
}
</style>